<template>
  <div>

    <div style="width: 1500px;float: left;margin-top: 30px">
        <div style="float: left;color: blueviolet">借款人信息认证</div>
        <div style="margin-top: 30px;">
          <el-steps :active="active"  finish-status="success">
            <el-step title="填写借款人信息"></el-step>
            <el-step title="提交平台审核"></el-step>
            <el-step title="等待认证结果"></el-step>
          </el-steps>
        </div>

    </div>

  <div style="float: left;margin-top: 25px;width: 1500px;background: beige;margin-left: 60px" v-if="fag && 1==1">
    <h1>个人信息</h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="婚姻状况">
        <el-select v-model="formInline.marriageStatus" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label">
          </el-option>
        </el-select>
      </el-form-item><br>
      <h1>职业信息</h1>
        <el-form-item label="职业类型">
          <el-select v-model="formInline.professionType" placeholder="请选择">
            <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item><br>

      <el-form-item label="居住地">
        <el-input v-model="formInline.area" placeholder="请填写居住地"></el-input>
      </el-form-item><br>
      <el-form-item label="单位名称">
        <el-input v-model="formInline.unit" placeholder="请填写单位名称"></el-input>
      </el-form-item><br>
      <el-form-item label="详细地址">
        <el-input v-model="formInline.address" placeholder="请填写详细地址"></el-input>
      </el-form-item><br>
      <el-form-item label="月收入">
        <el-input v-model="formInline.monthlyIncome" placeholder="请填写月收入"></el-input>
      </el-form-item><br>
      <h1>联系人信息</h1>
      <el-form-item label="姓名">
        <el-input v-model="formInline.contactName" placeholder="联系姓名"></el-input>
      </el-form-item><br>
      <el-form-item label="手机号">
        <el-input v-model="formInline.phone" placeholder="联系人手机号"></el-input>
      </el-form-item><br>
      <el-form-item label="关系">
        <el-select v-model="formInline.relation" placeholder="请选择单位地址">
          <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.label">
          </el-option>
        </el-select>
      </el-form-item><br>

    </el-form>
    <el-button id="b1" style="margin-top: 12px;width: 200px;height: 50px;border-radius: 25px;
    background: chocolate;margin-left: 0px;color: white;font-size: 18px" @click="next">提交</el-button>
  </div>

    <!--提交生审批-->
    <div v-if="fag2" style="width: 1500px;margin-top: 100px;float: left">
       <div v-if="this.formInline.infoStatus==0" >
        <img :src="logo">
      </div>
      <div v-if="this.formInline.infoStatus==1">
        <h1 style="color: chocolate">审核已经通过</h1>
        <button style="width:100px;height: 50px;background: #42b983;border-radius: 25px;color: white;border: none" @click="JieKuan">刷脸贷款</button>
      </div>
      <div v-if="this.formInline.infoStatus==2">
        <h1 style="color: chocolate">由于个人信用原因,审核已经驳回!!</h1>
      </div>
    </div>





  </div>
</template>

<script>
export default {
  data() {
    return {
      Information:{

      },
      logo: require('@/assets/2323.png'),
      fag:true,
      fag2:false,
      active: 0,
      options: [{
        value: '选项1',
        label: '已婚'
      }, {
        value: '选项2',
        label: '未婚'
      }, {
        value: '选项3',
        label: '离异'
      }, {
        value: '选项4',
        label: '未知'
      }],
      options1: [{
        value: '选项1',
        label: '个体户/企业负责人'
      }, {
        value: '选项2',
        label: '工人'
      }, {
        value: '选项3',
        label: '农林牧业人员'
      }, {
        value: '选项4',
        label: '公务员/服务员/收银员'
      }],
      options2: [{
        value: '选项1',
        label: '父子'
      }, {
        value: '选项2',
        label: '母子'
      }, {
        value: '选项3',
        label: '兄弟'
      }, {
        value: '选项4',
        label: '兄妹'
      }],
      value: '',
      formInline: {
        productId:this.$route.query.productId,
        infoStatus:'',
        userId:1,
        infoId:'',
      }
    };
  },
  created() {
   this.beg()
  },

  methods: {
    //判断是否已经审批通过
    beg(){
      this.$http.get("informations/getByProId?productId="+this.formInline.productId+'&userID='+this.formInline.userId).then(res=>{
        if(res.data.data!=null){
          this.formInline.infoId=res.data.data.infoId
        }
        if(res.data.data==null){
          this.fag=true
          this.fag2=false
        }else{
          this.formInline.infoStatus=res.data.data.infoStatus
          if(this.formInline.infoStatus == 1||this.formInline.infoStatus == 2){
            this.fag=false
            this.fag2=true
            this.active=3
          }
          if(res.data.data!=null){
            this.fag=false
            this.fag2=true
          }
        }
      })

    },
    next() {
      console.log(this.formInline)
      if (this.active++ > 2) this.active = 0;
      this.fag=false,
      this.fag2=true
      this.active=2
      //添加个人数据
      this.$http.post("/informations/save",this.formInline).then( res=>{
          console.log(res.data)
      })
    },
    onSubmit() {
      console.log('submit!');
    },
    JieKuan(){
      this.$router.push('/getCamera')
      sessionStorage.setItem("productId",this.formInline.productId)
      this.$router.push({
        path:"/JieKuan",
        query:{
          productId:this.formInline.productId,
          infoId:this.formInline.infoId
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
